<template>
    <span class="my-badge" :class="typesClass"
          :style="{backgroundColor: bgcolor, color: color, transform: 'scale('+scale+')'}">
        <slot></slot>
    </span>
</template>

<script type="text/babel">
    import utils  from '../utils/getColor.js';

    export default {
        name: 'my-badge',
        props: {
            type: {
                validator(value) {
                    return ['primary', 'danger', 'warning', 'hollow'].indexOf(value) > -1;
                }
            },
            shape: {
                validator(value) {
                    return ['circle', 'square'].indexOf(value) > -1;
                }
            },
            color: {
                validator(value) {
                    if(!value) return true;
                    return utils.isColor(value);
                }
            },
            bgcolor: {
                validator(value) {
                    if(!value) return true;
                    return utils.isColor(value);
                }
            },
            scale: {
                validator(val) {
                    return /^(\d*(.\d+)?)$/.test(val);
                },
                default: 1
            }
        },
        computed: {
            typesClass() {
                if (this.bgcolor) {
                    if (this.shape === 'square') {
                        return ' my-badge-radius';
                    }
                    return '';
                }
                return (this.type ? 'my-badge-' + this.type : '') + (this.shape === 'square' ? ' my-badge-radius' : '');
            }
        }
    }
</script>

<style lang="less">
    @import './badge.less';
</style>
